<script setup lang="ts">
import { getAirConditioner, setDeviceStatus, setSpeed, setTemperature } from '@/api/device';
import type { airConditioner, devices } from '@/props/device';
import { useDeviceStore } from '@/stores/device';
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';

const temperature = ref(24);

const deviceStore = useDeviceStore()


// 寻第一个 deviceType 为 "1" 的设备
function findFirstDeviceWithType1(devices: devices) {
  return devices.find(device => device.deviceType === 1);
}


//查询空调设备数据
const airData = reactive<airConditioner>({
  airConditionerId: 0,
  airConditionerTemp: "0.0",
  deviceName: "",
  roomTemperature: "0.0",
  speed: 0,
  status: 0,
  windSpeed: 0.0
});
const airConditionerData = async () => {
  const deviceData = findFirstDeviceWithType1(deviceStore.deviceAllData)
  if (!deviceData) {
    const nullData = {
        airConditionerId: 0,
        airConditionerTemp: "0.0",
        deviceName: "",
        roomTemperature: "0.0",
        speed: 0,
        status: 0,
        windSpeed: 0.0
    };
    Object.assign(airData,nullData)
    return;
  }
  try{
    const {data} = await getAirConditioner(deviceData.deviceId)
    speedActice.value = data.data.speed
    Object.assign(airData,data.data)
  }catch{
    console.log("Error")
  }

}
const statusComputed = computed(() => {
  return airData.status === 1 ? true : false
})

//监听是否发送新的请求
watch(deviceStore.deviceAllData,() => {
  airConditionerData()
})

//设备状态修改
const setDeviceStatusData = async(deviceId:number,status:number) => {
  const {data} =  await setDeviceStatus(deviceId,status)
  if (data.code === 1) {
    ElMessage.success("状态修改成功")
    return
  }
  ElMessage.error(`状态修改失败${data.msg}`)
}
const setStatus = () => {
  const deviceData = findFirstDeviceWithType1(deviceStore.deviceAllData)
  const newStatus = airData.status === 1 ? 0 : 1;
  if (!deviceData) {
    console.log("No device found with deviceType");
    return;
  }
  setDeviceStatusData(deviceData.deviceId,newStatus)
  airData.status = newStatus
}

//修改空调温度
const setTemperatureData = async(airConditionerId:number,airConditionerTemperature:number) => {
  const {data} = await setTemperature(airConditionerId,airConditionerTemperature)
  if (data.code === 1){
    ElMessage.success("温度修改成功")
    return
  }
  ElMessage.error(data.msg)
}
watch(temperature,newData => {
  setTemperatureData(airData.airConditionerId,newData)
})

//风速


const speedList = [1,2,3,4]
const speedActice = ref()
const speedData = async(speed:number) => {
  const {data} = await setSpeed(airData.airConditionerId,speed)
  if (data.code === 1){
    ElMessage.success("风速修改成功")
    speedActice.value = speed
    return
  }
  ElMessage.error(data.msg)
}
</script>

<template>
  <div class="air-conditioner-control">
    <div class="header">
      <h2 class="gradient-text">{{ airData.deviceName }}</h2>
      <el-switch @click="setStatus" v-model="statusComputed" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </div>
    <div class="temperature-display">
      <span class="gradient-text">{{ temperature }}°C</span>
    </div>
    <div class="slider-container">
      <el-slider v-model="temperature" :min="16" :max="32"></el-slider>
    </div>
    <div class="function-icons">
      <el-button type="text" class="icon-button"
      v-for="item in speedList" :key="item"
      @click="speedData(item)"
      >
        <div :class="{ 'active': speedActice === item}">{{ item }}</div>
      </el-button>
    </div>
  </div>
</template>

<style scoped>

.air-conditioner-control {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.temperature-display {
  font-size: 2em;
  text-align: center;
  margin-bottom: 30px;
}

.slider-container {
  margin-bottom: 10px;
}

.function-icons {
  display: flex;
  justify-content: space-around;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  /* background-color: #444; */
  display: flex;
  justify-content: center;
  align-items: center;
  div{
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(161, 161, 161);
      color:black;
    }
    div.active{
    background-color: rgb(0, 149, 255);
    color:white;
  }
}

.gradient-text {
  background: linear-gradient(90deg, #aaf7ff, #e5c1ff);
  -webkit-background-clip: text; /* Webkit浏览器的剪裁 */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* 文字填充颜色透明 */
  color: transparent; /* 非Webkit浏览器下保持颜色透明 */
}
</style>
